<template>
  <div>
    <SearchForm
        @search="onSearch"
        @reset="onReset"
        :search-list="searchList" :search-params="searchParams">
    </SearchForm>

    <div class="table-layout">
      <el-card shadow="never">
        <div class="table-box">
          <el-table
              size="large"
              stripe
              border
              v-loading="loading"
              max-height="500px"
              :data="tableData"
              row-key="id"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(255, 255, 255, 0.8)"
              @selection-change="onSelect"
          >
            <el-table-column label="申请编号" fixed="left" align="center" key="id" prop="id" />
            <el-table-column fixed="left" prop="review_status" label="审核状态" width="150">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.review_status === 1" type="warning">待审核</el-tag>
                <el-tag v-else-if="scope.row.review_status === 2" type="success">审核通过</el-tag>
                <el-tag v-else type="danger">审核拒绝</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="product.name" label="申请产品" width="150"/>
            <el-table-column prop="contact_person" label="联系人" width="150"/>
            <el-table-column prop="contact_phone" label="联系方式" width="150"/>
            <el-table-column prop="social_security_base" label="社保缴纳基数" width="150"/>
            <el-table-column prop="housing_fund_base" label="公积金缴纳基数" width="150"/>
            <el-table-column prop="salary_range" label="工资区间" width="150"/>
            <el-table-column prop="user.name" label="H5用户" width="150"/>
            <el-table-column prop="review_remark" label="审核备注" width="150"/>
            <el-table-column prop="assignee" label="分配的业务员" width="150"/>
            <el-table-column prop="create_time" label="申请时间" width="160"/>
            <el-table-column prop="update_time" label="更新时间" width="160"/>
            <el-table-column label="操作" fixed="right" width="140">
              <template slot-scope="scope">
                <el-button type="text" v-if="scope.row.review_status === 1" @click="onReview(scope.row)">审核</el-button>
                <el-button type="text" v-else @click="onReview(scope.row)">修改审核结果</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
      <div class="page-box">
        <el-pagination
            background
            :current-page="pageNo"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalSize"
            @size-change="changePageSize"
            @current-change="changePageNo"
        />
      </div>
    </div>
    <ReviewDialog ref="reviewDialogRef" @get-page="initData" />
  </div>
</template>
<script>

import crud from "@/mixins/crud";
import { http } from "@/api";
import ReviewDialog from "./review";

export default {
  name: "LoanApplicationIndex",
  components: {
    ReviewDialog
  },
  mixins: [crud],
  data() {
    return {
      request: http.loanApplication,
      searchList: [
        {
          label: '联系人',
          prop: 'contact_person',
          name: 'input',
          clearable: true
        },
        {
          label: '联系方式',
          prop: 'contact_phone',
          name: 'input',
          clearable: true
        },
        {
          label: '审核状态',
          prop: 'review_status',
          name: 'select',
          clearable: true,
          options: [
            { label: '待审核', value: 1 },
            { label: '审核通过', value: 2 },
            { label: '审核拒绝', value: 3 }
          ]
        }
      ],
      searchParams: {
        contact_person: '',
        contact_phone: '',
        review_status: ''
      },
      defaultParams: {
      },
      tableData: [],
    }
  },
  methods: {
    onReview(row) {
      this.$refs.reviewDialogRef.open(row);
    }
  }
}
</script>

<style scoped lang="scss">
.table-layout {
  margin-top: 20px;
}
.table-handle {
  margin-bottom: 20px;
}
.page-box {
  margin-top: 20px;
  text-align: right;
}
</style> 